<template>
	<view>
		<view class="head">
			<view class="top">
				<view class="arrow">
				</view>
				<view style="color: white; font-size: 48rpx;">专业洗车</view>
			</view>
			<view>
				<u--input customStyle="backgroundColor: white; width: 80vw;position: absolute;left: 8% ;top:130rpx; "
					placeholder="输入要搜索的内容" shape="circle" v-model="searchQuery"></u--input>
				<view style="position: absolute; top: 143rpx; left: 610rpx;">
					<image src="../../static/images/lzx/搜索.png" style="width: 50rpx;height: 50rpx" @click="list">
					</image>
				</view>
			</view>

			<view class="history">
				<view>历史记录：</view>
				<view class="history" v-for="(item,index) in recording" :key="index">
					<view>{{item.value}}</view>
				</view>

			</view>
			<view v-for="(item,index) in lists" :key="index">
				<uni-card @click="jumps(item)">
					<view class="line1">
						<view>
							{{item.storeName}}
						</view>
						<view>
							{{distance(item.latitude,item.longitude)}}米
						</view>
					</view>
					<view style="display: flex;margin-top: 1vh;">
						<uni-rate :readonly="true" size="20" :value="item.star" />

						<view style="margin-left: 5vw;">销量：{{item.sales}}</view>
					</view>
					<view class="line2">
						<view class="lineright">
							<image src="../../static/uni.png" style="height: 10vh;width: 20vw;"></image>
						</view>
						<view class="lineleft">
							<view>
								营业时间：{{item.week}}
							</view>
							<view>
								位置：{{item.address}}
							</view>
						</view>
					</view>
				</uni-card>
			</view>
			<!-- <uni-card>
				<view class="line1">
					<view>
						车百事汽车生活馆
					</view>
					<view>
						556m
					</view>
				</view>
				<view style="display: flex;margin-top: 1vh;">
					<uni-rate :readonly="true" size="20" :value="4" />
					4分 <view style="margin-left: 5vw;">销量：556</view>
				</view>
				<view class="line2">
					<view class="lineright">
						<image src="../../static/uni.png" style="height: 10vh;width: 20vw;"></image>
					</view>
					<view class="lineleft">

						<view>
							营业时间：周一到周五 早上8:00-晚上22:00
						</view>
						<view>
							位置：山阳区人民路与解放路交叉口
						</view>
					</view>
				</view>
			</uni-card> -->

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				distanceValue: 100,
				latitude: 34.826128,
				longitude: 113.558902,
				recording: [],
				lists: [],
				shop: {
					storeName: '',
					address: '',
				},
				searchQuery: '',
			}
		},
		onLoad() {
			this.list();
		},
		watch: {

			searchQuery(newVal) {
				if (newVal) {
					if (newVal != '') {
						// 将 newVal 的值赋给 storeName 和 address
						this.shop.storeName = newVal;
						this.shop.address = newVal;
						console.log('storeName 和 address 更新为:', newVal);
					}

				}
			},
		},
		methods: {
			jumps(item) {
				const itemStr = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pages/lzx/carWash?param=1&item=${itemStr}`
				})
			},
			calculateDistance(lat1, lon1, lat2, lon2) { //计算两点之间的距离
				console.log('lat1, lon1, lat2, lon2', lat1, lon1, lat2, lon2)
				let R = 6371; //地球半径
				let dLat = this.deg2rad(lat2 - lat1)
				let dLon = this.deg2rad(lon2 - lon1)
				let a =
					Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2);
				let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				let d = R * c; // 距离，单位：千米  
				let e = parseFloat(d)
				let f = e.toFixed(2)
				return f;
			},
			deg2rad(deg) {
				return deg * (Math.PI / 180)
			},
			distance(la, lo) {

				return this.calculateDistance(34.826128, la, 113.558902, lo); // 计算属性返回值
			},
			list() {
				this.recording.push({
					value: this.shop.storeName
				});
				console.log(this.recording)
				let that = this;
				this.$http({
					url: '/api/shop/manage/list',
					method: 'GET',
					data: this.shop,
					success(res) {
						if (res.data.code == 200) {
							that.lists = res.data.rows
							that.shop.storeName = '';
							that.shop.address = '';
						}

						console.log(res)
					}
				})

			},
			// sousuo() {
			// 	let that = this;
			// 	this.$http({
			// 		url: '/api/shop/manage/',
			// 		method: 'GET',
			// 		success(res) {
			// 			if (res.data.code == 200) {
			// 				that.lists = res.data.rows
			// 			}

			// 			console.log(res)
			// 		}
			// 	})

			// }

		}
	}
</script>

<style>
	.line1 {
		margin-top: 2vh;
		display: flex;
		justify-content: space-between;
	}

	.line1 :nth-child(1) {
		font-size: 3vh;
		font-weight: 600;
	}

	.line1 :nth-child(2) {
		color: #2F81FA;
	}

	.lineright {
		padding-top: 1vh;
		/* padding-left: 2vw; */
		box-sizing: border-box;
	}

	.line2 {
		display: flex;
	}

	.lineleft {
		margin-left: 2vw;
		margin-top: 1vh;
		text-align: left;
		font-size: 25rpx;
	}

	.history {
		margin-top: 10vh;
		padding: 0 3vw;
		display: flex;
		flex-wrap: wrap;
		color: white;
	}

	.history :nth-child(1) {
		font-size: 3vh;
	}

	.history :not(:nth-child(1)) {
		padding-top: 8rpx;
		/* color: aqua; */
		height: 3vh;
		margin-top: 2rpx;
		font-size: 20rpx;
		margin-left: 2vw;
	}

	.top {
		background-color: #2F81FA;
		width: 100%;
		height: 20%;
		position: fixed;
		position: relative;
		text-align: center;
		padding-top: 4%;
		box-sizing: border-box;
	}

	.arrow {
		height: 28rpx;
		width: 28rpx;
		border-top: 4rpx solid white;
		border-right: 4rpx solid white;
		transform: rotate(225deg);
		position: absolute;
		left: 3%;
	}

	.head {
		position: relative;
		text-align: center;
		height: 35vh;
		width: 100%;
		background-color: #2F81FA;
	}
</style>